<template>
  <div
    v-loading="loading" element-loading-text="拼命加载中"
  >
    <div ref="commandstats" style="height: 420px" />
    <ul class="list-group df fww crg10 ">
      <li style="cursor: pointer;" :key="item.province" v-for="item in state.data" @click="handleClick(item)">
        <div class="download-province tac fw500">
          {{ item.province }}
        </div>
        <div
          style="height: calc(100% - 60px)" class="df aic tac jcc fs28 c-1989fa"
        >
          {{ item.companyCnt }}
        </div>
      </li>

      <li v-for="i in 10" :key="i + 'sdfg'" class="h0"></li>
    </ul>
  </div>
</template>
<script setup>
import { getCompanyStatistics } from '@/api/uploadFile'
import * as echarts from 'echarts'
import { onMounted, reactive, ref } from 'vue'

const commandstats = ref(null)
const loading = ref(false)
const emit = defineEmits(['provinceClick'])
const state = reactive({
  data: []
})

onMounted(() => {
  loading.value = true
  getCompanyStatistics({}).then((res) => {
    state.data = res.data
    loading.value = false
    const total = res.data.reduce((pre, cur) => {return pre + (cur.companyCnt || 0)}, 0)
    const t = total ? `(${ total })` : ''
    getList(t)
  })
})

function handleClick(item) {
  emit('provinceClick',item)
}

function getList(t) {
  const commandstatsIntance = echarts.init(commandstats.value, 'macarons')
  commandstatsIntance.setOption({
    toolbox: {
      show: true,
      feature: {
        magicType: { type: ['pie'] },
        saveAsImage: {}
      }
    },
    title: {
      show: true, //false
      text: '数据导出企业数量汇总' + t, //主标题文本
      textStyle: {
        align: 'center',
        color: '#1989fa', //'red'，字体颜色
        fontStyle: 'normal', //'italic'(倾斜) | 'oblique'(倾斜体) ，字体风格
        fontWeight: 'normal', //'bold'(粗体) | 'bolder'(粗体) | 'lighter'(正常粗细) ，字体粗细
        fontFamily: 'sans-serif', //'sans-serif' | 'serif' | 'monospace' | 'Arial' | 'Courier New'
        // 'Microsoft YaHei'(微软雅黑) ，文字字体
        fontSize: 18, //字体大小
        lineHeight: 18 //字体行高
      }
    },
    xAxis: {
      type: 'category',
      data: [...state.data.map((v) => v.province)]
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [...state.data.map((v) => v.companyCnt)],
        type: 'bar',
        label: {
          show: true,
          color: '#1989fa',
          position: 'top'
        }
      }
    ]
  })
}
</script>
<style scoped>
li:not(.h0) {
  width: 180px;
  min-height: 200px;
  border-radius: 4px;
  border: 1px solid #e6ebf5;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.crg10 {
  row-gap: 10px;
  column-gap: 10px;
}

.h0 {
  height: 0;
  width: 200px;
  min-height: 0;
}

.download-province {
  padding: 18px 20px;
  border-bottom: 1px solid #e6ebf5;
  box-sizing: border-box;
}
</style>
